﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="NewsVariableTile.ItemDetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:NewsVariableTile"
    xmlns:data="using:NewsVariableTile.Data"
    xmlns:common="using:NewsVariableTile.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.TopAppBar>
        <AppBar x:Name="TopApp" Padding="10,0,10,0" MinHeight="130" Background="#FF100B34" BorderBrush="#FF100B34">
            <Grid Margin="0">
                <StackPanel Margin="0" HorizontalAlignment="Center" Orientation="Horizontal">
                    <RadioButton x:Name="rbtnNational" Tag="National" Content="National" VerticalAlignment="Stretch" Style="{StaticResource TopAppBarRadioButtonStyle}" IsChecked="False" MinHeight="130" FontSize="24" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Tapped="rbtnNational_Tapped_1"/>
                    <RadioButton x:Name="rbtnWorld" Tag="World" Content="World" VerticalAlignment="Stretch" Style="{StaticResource TopAppBarRadioButtonStyle}" MinHeight="130" FontSize="24" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" IsChecked="False" Tapped="rbtnWorld_Tapped_1"/>
                    <RadioButton x:Name="rbtnSports" Tag="Sports" Content="Sports" VerticalAlignment="Stretch" Style="{StaticResource TopAppBarRadioButtonStyle}" MinHeight="130" FontSize="24" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" IsChecked="False" Tapped="rbtnSports_Tapped_1"/>
                    <RadioButton x:Name="rbtnBusiness" Tag="Business" Content="Business" VerticalAlignment="Stretch" Style="{StaticResource TopAppBarRadioButtonStyle}" MinHeight="130" FontSize="24" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" IsChecked="False" Tapped="rbtnBusiness_Tapped_1"/>
                    <RadioButton x:Name="rbtnEntertainment" Tag="Entertainment" Content="Entertainment" VerticalAlignment="Stretch" Style="{StaticResource TopAppBarRadioButtonStyle}" MinHeight="130" FontSize="24" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" IsChecked="False" Tapped="rbtnEntertainment_Tapped_1"/>
                    <RadioButton x:Name="rbtnExclusives" Tag="Exclusives" Content="Exclusives" VerticalAlignment="Stretch" Style="{StaticResource TopAppBarRadioButtonStyle}" MinHeight="130" FontSize="24" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" IsChecked="False" Tapped="rbtnExclusives_Tapped_1"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>


    <Page.BottomAppBar>
        <AppBar x:Name="BottamApp" Padding="10,0,10,0" MinHeight="90" Background="#FF100B34" BorderBrush="#FF100B34">
            <StackPanel Margin="20,10,0,10" Orientation="Horizontal">
        		<!--<Button x:Name="btnShare" HorizontalAlignment="Left" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="20,0" >
        			<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
        				<Grid.RowDefinitions>
        					<RowDefinition Height="75"/>
        				</Grid.RowDefinitions>
        				<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/AppBar/BtmAppBarBtnShare.png" Margin="0" Height="63"/>
        			</Grid>
        		</Button>-->
        		<Button x:Name="btnFavorite" HorizontalAlignment="Left" BorderBrush="{x:Null}" BorderThickness="0" FontWeight="Normal" VerticalAlignment="Stretch" Padding="0" Style="{StaticResource TopAppbarBtnStyle}" Margin="20,0" >
        			<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0">
        				<Grid.RowDefinitions>
        					<RowDefinition Height="75"/>
        				</Grid.RowDefinitions>
        				<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/AppBar/BtmAppBarBtnFavorite.png" Margin="0" Height="63"/>
        			</Grid>
        		</Button>
        	</StackPanel>
        </AppBar>
    </Page.BottomAppBar>

 
   <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
       
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}" x:Name="LayoutRoot">
    	<Grid.Background>
    		<ImageBrush ImageSource="Assets/HomePage/Bg.jpg"/>
    	</Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <ScrollViewer x:Name="scrollViewer" Grid.Row="1" Style="{StaticResource HorizontalScrollViewerStyle}" Margin="0">
        	<Grid x:Name="detgrid" Margin="120,0,0,0"  >
        		<StackPanel Orientation="Horizontal">
        			<StackPanel Margin="0" Orientation="Vertical" Width="338" VerticalAlignment="Top">

                        <TextBlock x:Name="txtHeading" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="32" Margin="0,0,0,10" Text="{Binding Title}"/>
                        <!--<TextBlock x:Name="txtSubHeading" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Subtitle}" VerticalAlignment="Top" FontFamily="Segoe UI" FontSize="24" Margin="0,10,0,0"/>-->
        				<Grid Height="250" Width="340" HorizontalAlignment="Left" Margin="0,20,0,0">
        					<Grid.RowDefinitions>
        						<RowDefinition Height="199*"/>
        						<RowDefinition Height="51*"/>
        					</Grid.RowDefinitions>
        					<Image Grid.RowSpan="2" Source="Assets/HomePage/HomePageImage1.png"/>
        					<Grid Grid.Row="1" Background="#CC0D1D3C">
        						<TextBlock x:Name="ImageSubTItle" TextWrapping="Wrap" Text="Mauris quis interdum vehicula" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="18.667" Margin="15,0,10,0"/>
        					</Grid>
        				</Grid>
        				<TextBlock TextWrapping="Wrap" FontFamily="Segoe UI" FontSize="13.333" Margin="0,10,0,0">
        					<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
        					<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
        				</TextBlock>
        			</StackPanel>
        			<TextBlock TextWrapping="Wrap" FontFamily="Segoe UI" FontSize="13.333" Margin="80,0,0,0" Width="480">
        				<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat. "/>
        				<Run Text="Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
        				<LineBreak/>
        				<Run/>
        				<LineBreak/>
        				<Run Text="  Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
        				<LineBreak/>
        				<Run/>
        				<LineBreak/>
        				<Run Text="  Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.  Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.  Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat.  Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat."/>
        				<LineBreak/>
        				<Run/>
        				<LineBreak/>
        				<Run Text="  Pellentesque porta, mauris quis interdum vehicula, urna sapien ultrices velit, nec venenatis dui odio in augue. Cras posuere, enim a cursus convallis, neque turpis malesuada erat, ut adipiscing neque tortor ac erat. "/>
        			</TextBlock>
        		</StackPanel>
        	</Grid>
        </ScrollViewer>
        <Grid x:Name="grdSnapView" Grid.RowSpan="2" Visibility="Collapsed">
        	<Grid.Background>
        		<ImageBrush ImageSource="Assets/HubPageImages/Bg.jpg"/>
        	</Grid.Background>
        	<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="&quot;Please switch to full screen to view the details.&quot;" VerticalAlignment="Center" AllowDrop="True" FontSize="21.333" FontFamily="Segoe UI" Foreground="White"/>
        </Grid>
        <Grid>
            <Grid.ColumnDefinitions>
            	<ColumnDefinition Width="Auto"/>
            	<ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        	<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
        	<TextBlock x:Name="pageTitle" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}"  Text=""/>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled">
                	<Storyboard>
                		<DoubleAnimation Duration="0" To="20" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnNational" d:IsOptimized="True"/>
                		<DoubleAnimation Duration="0" To="20" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnWorld" d:IsOptimized="True"/>
                		<DoubleAnimation Duration="0" To="20" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnSports" d:IsOptimized="True"/>
                		<DoubleAnimation Duration="0" To="20" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnBusiness" d:IsOptimized="True"/>
                		<DoubleAnimation Duration="0" To="20" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnEntertainment" d:IsOptimized="True"/>
                		<DoubleAnimation Duration="0" To="20" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnExclusives" d:IsOptimized="True"/>
                	</Storyboard>
                </VisualState>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="detgrid">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>100,0,0,0</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" To="13.333" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnNational" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="13.333" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnWorld" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="13.333" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnSports" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="13.333" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnBusiness" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="13.333" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnEntertainment" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0" To="13.333" Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="rbtnExclusives" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grdSnapView">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Visible</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="scrollViewer">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="TopApp">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BottamApp">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Visibility>Collapsed</Visibility>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>

